<template>
  <div class="about">
    <header>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form-Classroom">
        <el-form-item label="教学楼：" prop="teachingbuilding">
          <el-select v-model="form.teachingbuilding" placeholder="请选择教学楼">
            <el-option
              v-for="item in form.teachingbuildingArr"
              :key="item.id"
              :label="`${item.name}/${item.id}`"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼层：" prop="floor">
          <el-select v-model="form.floor" placeholder="请选择楼层">
            <el-option label="一楼" value="1"></el-option>
            <el-option label="二楼" value="2"></el-option>
            <el-option label="三楼" value="3"></el-option>
            <el-option label="四楼" value="4"></el-option>
            <el-option label="五楼" value="5"></el-option>
            <el-option label="六楼" value="6"></el-option>
            <el-option label="七楼" value="7"></el-option>
            <el-option label="八楼" value="8"></el-option>
            <el-option label="九楼" value="9"></el-option>
            <el-option label="十楼" value="10"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-button type="primary" plain class="btn" @click="search()">查询</el-button>
    </header>
    <br />

    <main v-if="form.tableData.length">
      <el-table :data="form.tableData" style="width: 100%">
        <el-table-column label="教室名称">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总座位数">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.seat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="apply(scope.$index, scope.row) ">申请</el-button>

            <!-- <el-button size="mini" type="success" @click="handleApply(scope.$index, scope.row)">申请</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="申请" :visible.sync="dialogVisible" width="50%">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="教室名称：">{{this.form.buildingname}}</el-form-item>
          <el-form-item label="教学楼层：">{{this.form.searchfloor}}</el-form-item>

          <el-form-item label="教室名称：">{{ this.form.roomInfo.name}}</el-form-item>
          <el-form-item label="申请日期：">{{ this.form.today}}</el-form-item>

          <el-form-item label="预约日期：">
            <el-date-picker
              :clearable="false"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              v-model="value1"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleApply() ">确 定</el-button>
        </span>
      </el-dialog>
    </main>

    <div v-else class="kong">
      <img src="../assets/container-nodata-icon.svg" />
      <br />暂无数据，请查询
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      value1: "",

      form: {
        today: "",

        teachingbuilding: "",
        floor: "",
        teachingbuildingArr: [],
        tableData: [],
        // 查询之后的 楼层  教学楼
        searchteachingbuilding: {},
        searchfloor: "",
        tbuildingname: "",
        // 选中的教室信息

        roomInfo: {},
      },
      dialogVisible: false,
      rules: {
        teachingbuilding: [
          { required: true, message: "教学楼必选！", trigger: "blur" },
        ],

        floor: [{ required: true, message: "楼层必选！", trigger: "blur" }],
      },
    };
  },

  created() {
    this.getBuilding();

    const date = new Date();

    const current_date =
      date.getDate() > 10 ? date.getDate() : 0 + date.getDate();

    // 获取本  日
    const current_month =
      date.getMonth() + 1 > 10
        ? date.getMonth() + 1
        : "0" + (date.getMonth() + 1);

    console.log(current_month);
    // 获取本  月
    const current_year = date.getFullYear();
    const current_Hours = date.getHours();
    const current_Minutes = date.getMinutes();

    const current_Seconds = date.getSeconds();

    this.value1 = current_year + "-" + current_month + "-" + current_date;
    this.form.today =
      current_year +
      "-" +
      current_month +
      "-" +
      current_date +
      "    " +
      current_Hours +
      ":" +
      current_Minutes +
      ":" +
      current_Seconds;
  },

  methods: {
    // 获取教学楼
    getBuilding() {
      this.$axios({
        url: "/api/buildingQ",
        method: "post",
        data: {},
      }).then((res) => {
        if (res._RejCode === "00000000") {
          this.form.teachingbuildingArr = res.buildings;
        }
      });
    },
    // 查询
    search() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios({
            url: "/api/roomQ",
            method: "post",
            data: {
              buidingId: String(this.form.teachingbuilding),
              storeyId: this.form.floor,
            },
          }).then((res) => {
            if (res._RejCode === "00000000") {
              console.log(res.classrooms);
              if (res.classrooms.length == 0) {
                this.$message({
                  message: "该楼层暂无教室，请选择其他楼层",
                  type: "info",
                });
              }
              this.form.tableData = res.classrooms;

              this.form.searchteachingbuilding = this.form.teachingbuilding;
              this.form.searchfloor = this.form.floor;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    apply(index, row) {
      this.dialogVisible = true;

      this.form.roomInfo = row;

      this.form.teachingbuildingArr.forEach((i) => {
        if (i.id === this.form.searchteachingbuilding) {
          this.form.buildingname = i.name;
        }
      });
    },

    // 申请
    handleApply() {
      this.$axios({
        url: "/api/applyRoom",
        method: "post",
        data: {
          uid: String(JSON.parse(sessionStorage.getItem("userInfo")).id),
          buildId: String(this.form.searchteachingbuilding),
          applyTime: this.form.today,
          appointTime: this.value1,
          storey: String(this.form.searchfloor),
          roomId: String(this.form.roomInfo.id),
        },
      }).then((res) => {
        if (res._RejCode === "00000000") {
          this.$message({
            message: "申请成功",
            type: "success",
          });
          this.dialogVisible = false;
        }
      });
    },
  },
};
</script>
<style  scoped>
.about {
  width: 100%;
  margin: 0 auto;
}
header {
  width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-Classroom {
  display: flex;
}
.btn {
  width: 20%;
}
.kong {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kong > img {
  width: 500px;
}
</style>
